<template>
  <main-content title="标签管理" :inner-padding="false" class="category-main-content">
    <l-r-content-index v-loading="loading" :is-drag="true">
      <template #title>
        <div class="side-title-inner">
          标签分组
          <el-button type="primary" @click="createTagGroup(false)" v-has="['120205']">
            <el-icon>
              <Plus />
            </el-icon>
            <span style="margin-left: 10px">新增分组</span>
          </el-button>
        </div>
      </template>

      <template #title-search> </template>

      <template #side-content>

        <LeftTree
          ref="LeftTreeRef"
          :treeData="treeData"
          :treeProps="treeProps"
          :defaultExpandedKeys="defaultExpandedKeys"
          :disableSelect="disableSelect"
          :currentNodeKey="treeCurrentId || 'all'"
          @getTreeNodeId="getTreeNodeId"
          @add="add"
          @edit="edit"
          @del="del"
          :littlePointPermissions="['120207','120208','120209']"
          :buttonAdd="['120207']"
          :buttonEdit="['120208']"
          :buttonDel="['120209']"
        ></LeftTree>
      </template>

      <template #default>
        <tagList :categoryId="treeCurrentId" ref="tagListRefs" @setNodeId="(nodeId: any)=>{treeCurrentId = nodeId}"></tagList>
      </template>
    </l-r-content-index>

    <add-tag-grouop
      @confirm="confirm"
      @cancel="cancel"
      :showDialog="showDialog"
      :addData="addData"
      :treeSelectData="treeSelectData"
    ></add-tag-grouop>
  </main-content>
</template>
<script lang="ts">
export default {
  name: 'Attribute'
}
</script>
<script lang="ts" setup>
import tagList from "./component/tagList.vue";
import CustomerApi from "@/api/customerApi";
import addTagGrouop from "./component/addTagGrouop.vue";
import { ElMessageBox } from "element-plus";

const loading = ref(false);
const disableSelect = ref(false); // 禁止选中
const treeData = ref([] as any);
const treeSelectData = ref([] as any)
const addData = ref({
  parentId: "" as string | number,
  name: "",
  nodeType: 0,
} as any);
const treeProps = ref({
  label: "name",
});
const LeftTreeRef = ref();
const treeCurrentId = ref("");
const addTreeCurrentId = ref("");
const showDialog = ref(false);
const defaultExpandedKeys = ref([] as any);
const treeAll = ref([
  {
    id: "all",
    name: "全部",
    children: [],
  },
]);

// 获取节点id
const getTreeNodeId = (data: any) => {
  if (data.nodeType == 1 && data.children) {
    LeftTreeRef.value.setCurrentKey(treeCurrentId.value);  // 设置选中
    return;
  }
  if (data.id == "all") {
    treeCurrentId.value = "";
    return;
  }
  treeCurrentId.value = data.id;
};

// 获取左侧的树结构
const getTagGroupTree = async () => {
  let rs = await CustomerApi.getTagGroupTree({ nodeType: "" });
  if (rs.code === 200) {
    treeData.value = [...treeAll.value, ...rs.payload];
    treeSelectData.value = rs.payload;
  }
};


const add = async (data: any) => {
  addTreeCurrentId.value = data.id;
  showDialog.value = true;
};
const edit = async (data: any) => {
  addData.value = {
    id: data.id,
    parentId: data.parentId ? data.parentId : "",
    name: data.name,
    nodeType: data.nodeType,
  };
  showDialog.value = true;
};
const del = (data: any) => {
  ElMessageBox.confirm(`是否删除${data.name}`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let rs = await CustomerApi.delTagGroup({ id: data.id });
    if (rs.code === 200) {
      ElMessage.success("删除成功");
      if (data.id == treeCurrentId.value) {
        treeCurrentId.value = "";
      }
      LeftTreeRef.value.removeTreeNode(data); // 删除树节点的数据
    }
  });
};
// const tagGroupList = ref([] as any);
// const tagGroupAllList = ref({ id: "", name: "全部" });
// const isAdd = ref(false);
// const addData = ref({ id: null } as any);
// 标签分组列表查询
// const getTagGroupList = async () => {
//   let params = {
//     currentPage: 1,
//     showCount: -1,
//   };
//   let rs: any = await CustomerApi.getTagGroupList(params);
//   if (rs.code === 200) {
//     tagGroupList.value = [tagGroupAllList.value, ...rs.payload];
//   }
// };


// 新增or编辑标签分组

const createTagGroup = (rowData: any) => {
  showDialog.value = true;
  
  // if (rowData) {
  //   addData.value = rowData;
  // }
};

// 删除标签分组
const _deleteTagGroup = async (row: any) => {
  ElMessageBox.confirm("确认删除此分组？", "提示").then(async () => {
    let rs = await CustomerApi.delTagGroup({ id: row.id, name: row.name });
    if (rs.code == 200) {
      ElMessage.success("删除分组成功");
      // getTagGroupList();
    }
  }).catch(()=>{
    ElMessage.info('已取消删除')
  });
};

const confirm = async (parentId: string) => {
  await getTagGroupTree();
  treeCurrentId.value = parentId;
  defaultExpandedKeys.value = [parentId];
};
const cancel = () => {
  
  showDialog.value = false;
  addData.value = {
    id: null,
    parentId: "",
    name: "",
    nodeType: 1,
  };
};
// const confirmAdd = () => {
//   getTagGroupList();
// };
// const cancelAdd = () => {
//   isAdd.value = false;
//   addData.value = { id: null };
// };
const tagListRefs = ref();
const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    await getTagGroupTree();
    tagListRefs.value.onSearch();
  },
  {
    deep: true
  }
)

onMounted(async () => {
  // await getTagGroupList();
  getTagGroupTree()

});
</script>

<style scoped lang="scss">
.side-title-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.category-item {
  margin-top: 6px;

  .rank-item {
    display: flex;
    align-items: center;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-color-primary);
      margin-bottom: 5px;
    }

    .desc {
      font-size: 12px;
      color: var(--el-color-info-dark-2);
    }
  }

  .left {
    width: 50px;
    height: 50px;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    overflow: hidden;
    border-radius: 5px;
  }

  .right {
    flex: 1;
  }
}

:deep(.main-content-tab-bar-wrapper) {
  margin-bottom: 0;
}
</style>
